<template>
  <a-spin :spinning="pageLoading">
    <a-form-model class="detail-form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="公司全称">
        <a-input allowClear v-model="form.title"/>
      </a-form-model-item>
      <a-form-model-item label="简称">
        <a-input allowClear v-model="form.shortTitle"/>
      </a-form-model-item>
      <a-form-model-item label="营业执照">
        <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="Util.getUploadImagePath()"
            :before-upload="beforeUpload"
            @change="handleChangecertImage"
        >
          <img v-if="form.certImage" :src="form.certImage" alt="avatar" style="width:80px;height: 80px"/>
          <span v-else>
            <a-icon type="plus"/>
            <span class="ant-upload-text">
              Upload
            </span>
          </span>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="人力资源许可证">
        <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="Util.getUploadImagePath()"
            :before-upload="beforeUpload"
            @change="handleChangecert"
        >
          <img v-if="form.cert" :src="form.cert" alt="avatar" style="width:80px;height: 80px"/>
          <span v-else>
            <a-icon type="plus"/>
            <span class="ant-upload-text">
              Upload
            </span>
          </span>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="公司简介">
        <a-input allowClear v-model="form.desc"/>
      </a-form-model-item>
      <a-form-model-item label="公司规模">
        <a-input allowClear v-model="form.peopleNum"/>
      </a-form-model-item>
      <a-form-model-item label="注册时间">
        <a-input allowClear v-model="form.start" placeholder="格式：2020-01-01"/>
      </a-form-model-item>
      <a-form-model-item label="主页">
        <a-input allowClear v-model="form.url"/>
      </a-form-model-item>
      <a-form-model-item label="统一社会信用代码">
        <a-input allowClear v-model="form.num"/>
      </a-form-model-item>
      <a-form-model-item label="经营状态">
        <a-input allowClear v-model="form.workState"/>
      </a-form-model-item>
      <a-form-model-item label="所在城市">
        <a-cascader :options="Config.cityOptions" placeholder="请选择" v-model="form.cityId"/>
      </a-form-model-item>
      <a-form-model-item label="服务类型">
        <a-cascader :options="Config.serviceOptions" placeholder="请选择" v-model="form.service"/>
      </a-form-model-item>
      <a-form-model-item label="服务区域">
        <a-cascader :options="Config.areaOptions" placeholder="请选择" v-model="form.area"/>
      </a-form-model-item>
      <a-form-model-item label="主要服务岗位">
        <a-cascader :options="Config.postOptions" placeholder="请选择" v-model="form.postData"/>
      </a-form-model-item>
      <a-form-model-item label="绑定管理员">
        <a-select allowClear placeholder="请选择" v-model="form.userId">
          <a-select-option :value="v.id" v-for="(v, i) in userList" :key="i">{{ v.name }}</a-select-option>
        </a-select>
        <p>请从未绑定过服务商或企业的用户中选择管理员</p>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
        <a-button type="primary" @click="onSubmit"> 提交</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>
<script>

import config from "../../tools/config";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default {
  data() {
    return {
      // 公用配置
      Config: {},
      pageLoading: false,
      uploadLoading: false,
      labelCol: {span: 5},
      wrapperCol: {span: 14},
      userList: [],
      form: {
        certImage: "",
        cert: "",
        workingImage: '',
        contractState: 1,
        email: null,
        enable: true,
        followState: 0,
        image: "",
        mobile: "",
        mobileState: 1,
        name: "",
        nickname: "",
        password: "",
        subscribeState: 0,
        supplier: null,
        supplierId: null,
        type: '',
        usState: 1
      },
    };
  },
  created() {
    this.Config = config
    this.getUserList()
  },
  methods: {

    getUserList() {
      this.Http.get("/admin/user/getList", {type: 1}).then(res => {
        if (res.code == 1) {
          this.userList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 提交更新
    onSubmit() {
      this.form.cityId = this.form.cityId[this.form.cityId.length - 1]
      this.form.service = this.form.service[this.form.service.length - 1]
      this.form.area = this.form.area[this.form.area.length - 1]
      this.form.postData = this.form.postData[this.form.postData.length - 1]
      this.Http.post("/admin/supplier/create", this.form).then(res => {
        if (res.code == 1) {
          this.$message.success(res.msg)
          setTimeout(() => {
            location.reload()
          }, 1500)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 上传
    handleChangecertImage(info) {
      if (info.file.status === 'uploading') {
        this.uploadLoading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.form.certImage = info.fileList[0].response.data.path;
        this.uploadLoading = false;
      }
    },
    // 上传
    handleChangecert(info) {
      if (info.file.status === 'uploading') {
        this.uploadLoading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.form.cert = info.fileList[0].response.data.path;
        this.uploadLoading = false;
      }
    },

    // 上传前检测格式和大小
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>
